<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-07 22:34:52
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-26 21:15:06
 * @FilePath: /chat-ai-plus/src/pages/login/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <scroll-view :scroll-top="0" scroll-y="true" class="full">
    <view class="container full-height">
      <view class="row justify-content-center full-height">
        <view class="col-12 col-sm-8 col-md-6 col-xl-4 p_lg full-height">
          <view class="align-items_center justify_center image-container">
            <u-image
              width="144px"
              height="110px"
              model="widthFix"
              class="my_lg"
              src="/static/images/logo-t@2x.png"
            ></u-image>
          </view>

          <view>
            <u-button
              type="primary"
              class="my_lg block_button"
              @click="handleWxLogin"
              :text="$t('login.weChat')"
              :loading="wxLogging"
              shape="circle"
            ></u-button>
          </view>
          <view class="py_default t_center center-line">
            {{ $t('login.other') }}
          </view>

          <view class="align-items_center align-items_center gap_sm">
            <div class="flex"></div>

            <div class="flex align-items_center gap_sm">
              <u-button
                shape="circle"
                class="px_lg"
                icon="phone-fill"
                @click="navigateTo('mobile')"
              ></u-button>
              <u-button
                shape="circle"
                class="px_lg"
                @click="navigateTo('email')"
              >
                <u-icon size="22" name="Mail" custom-prefix="icon"></u-icon>
              </u-button>
            </div>
            <div class="flex"></div>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { navigateTo } from '@/utils/uni';

export default defineComponent({
  name: 'Login',
  setup() {
    const wxLogging = ref(true);
    function handleWxLogin() {
      // #ifdef MP-WEIXIN
      wxLogging.value = true;
      uni.login({
        provider: 'weixin',
        success: res => {
          navigateTo('app');
          wxLogging.value = false;
        },
        fail: err => {
          console.log('login fail', err);
          wxLogging.value = false;
        },
      });
      // #endif
    }

    return {
      navigateTo,
      handleWxLogin,
      wxLogging,
    };
  },
});
</script>

<style lang="scss" scoped>
.image-container {
  height: 60%;
}

.center-line {
  position: relative;
  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;

    transform: translate(0, 50%);
    border-bottom: solid 1px #cccccc;
    height: 0;
    width: 20%;
  }
  &::before {
    right: calc(50% + 100px);
  }
  &::after {
    left: calc(50% + 100px);
  }
}
</style>

